<template>
  <div>
    管理员
  </div>
  <el-table :data="tableData.list" style="width: 100%">
    <el-table-column prop="id" label="id"/>
    <el-table-column prop="name" label="昵称"  />
    <el-table-column prop="permissions_id" label="所属组别"  >
      <template #default="scope">
        {{ PermissionsName(scope.row.permissions_id) }}
      </template>
      </el-table-column>
      <el-table-column prop="mobile" label="手机号"  />

      <el-table-column prop="active" label="状态" >
      <template #default="scope">
        <el-tag :type="scope.row.active ?'success':'danger'">{{ scope.row.active ?'正常':'失效' }}</el-tag>
      </template>
      </el-table-column>

      <el-table-column  label="创建时间" >
      <template #default="scope">
        <div class="flex-box">
          <el-icon><Clock /></el-icon>
          <span style="margin-left: 10px"> {{ scope.row.created_time }}</span>
        </div>
      </template>
      </el-table-column>

    <el-table-column  label="操作" >
      <template #default="scope">
        <el-button type="primary" @click="open(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {authAdmin ,userMenuSelectList} from '@/api/index'
import { dayjs } from 'element-plus';
import {reactive,onMounted, ref} from 'vue'

const paginationData = reactive({
  pageNum:1,
  pageSize:10
})
//列表数据
const tableData = reactive({list:[],total:0})

onMounted(()=>{
  authAdmin(paginationData).then(({data})=>{
    console.log(data)
    const {list,total} = data.data
    list.forEach(item=>{
      item.created_time = dayjs(item.created_time).format('YYYY-MM-DD HH:mm:ss')
    })
    tableData.list = list
    tableData.total = total
})
userMenuSelectList().then(({data})=>{
  options.value = data.data
})
})
const options =ref([])


//根据权限id匹配权限名称
const PermissionsName = (id) =>{
  const data = options.value.find(item=>item.id === id)
  return data ? data.name : '超级管理员'
}

const open = (row) =>{
}
</script>

<style scoped lang="less">
.flex-box{
  display: flex;
  align-items: center;
}
</style>